const contentNode = document.getElementById('content');

class Login extends React.Component {
    render() {
        return React.createElement(LoginForm, null);
    }
}

class LoginForm extends React.Component {
    constructor() {
        super();
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleSubmit(e) {
        e.preventDefault();
        var form = document.forms.loginForm;
        var username = form.username.value;
        var password = form.password.value;
        var data = { "username": username, "password": password };
        fetch("/api/login", {
            method: "POST",
            headers: { 'Content-Type': 'application/json' },
            body: JSON.stringify(data)
        }).then(response => {
            if (response.ok) {
                response.json().then(result => {
                    if (result.status == 'error') {
                        console.log(result);
                        alert('登录错误：' + result.message);
                    } else if (result.status == 'ok') {
                        alert('登录成功：' + result.message);
                    }
                });
            }
        }).catch(err => {
            console.log('Login Error:', err);
        });
    }

    render() {
        return React.createElement(
            "form",
            { name: "loginForm", onSubmit: this.handleSubmit },
            React.createElement(
                "label",
                { htmlFor: "username" },
                "\u7528\u6237\u540D\uFF1A"
            ),
            React.createElement("input", { type: "text", name: "username" }),
            React.createElement("br", null),
            React.createElement(
                "label",
                { htmlFor: "password" },
                "\u5BC6\u7801:"
            ),
            React.createElement("input", { type: "password", name: "password" }),
            React.createElement("br", null),
            React.createElement("input", { type: "submit", value: "\u767B\u5F55" })
        );
    }
}

ReactDOM.render(React.createElement(Login, null), contentNode);